<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>乐天果农</title>
		<link rel="stylesheet" type="text/css" href="new_file.css"/>
	</head>
	<body>
		<div class="bci"> <img src="logo-public.png" id="log" ></div>
		<div class="box">
			<h1 style="font-weight: 300; font-size: 50px">新用户注册</h1>
			<br>
			<h2>乐天果农 <a href="#" id="a">新手礼包</a> </h2>
			
			<br><br>
			
			<div class="inp">
			<input type="text" id="user_name" onblur="ccname()" placeholder="账号"  maxlength="20" onfocus="on()" >
			</div>
			<p id="t1" class="r"> </p>
			<br>
			<div class="inp">
				
			
			<input type="password" id="user_password" placeholder="密码"  maxlength="20" onblur="ccpassword()" onfocus="on1()">
			<p id="t2" class="r"> </p>
			<p id="a2" class="g"> </p>
			<p id="b2" class="g"> </p>
			<p id="c2" class="g"> </p>
			
			</div>
			
			<select>
				<option>+86  中国</option>
				<option>+852  香港特别行政区</option>
				<option>+853  澳门特别行政区</option>
			</select>
			<input type="text"  id="numb" placeholder="手机号码"  maxlength="11" onblur="ccnumb()" />
			<br>
		<!-- 	<span style="color: gray; font-size: 14px; display: inline-block; margin-top: 10px;">可通过该手机号找回密码</span> -->
			<p id="t3"></p>
			
			
			
			<button type="button" onclick="zhuce()">立即注册</button>
			<br>
			<label id="chebox"><input id="chec" type="checkbox" value='1'/> 我已阅读并同意相关服务条款和隐私政策 </label>
			
			<p id="bot">Copyright © 1998-2020Tencent All Rights Reserved</p>
		</div>
		
		<div class="dic">  
		<ul>
			<li><a href="https://lol.qq.com/space/index.shtml">个人中心</a></li>
			<li>赛事公告</li>
			<li>意见反馈</li>
		</ul>
		
		</div>
		
		<script type="text/javascript">
			// var u_name = document.getElementById("user_name").value;
			// var t_1 = document.getElementById("t1");
			// var u_nameGr = /^\d{6,12}$/;
			// console.log(u_name);
			function zhuce(){
				var t_3 = document.getElementById("t3").innerHTML;
				var t_2 = document.getElementById("t2").innerHTML;
				var t_1 = document.getElementById("t1").innerHTML;
				var a = document.getElementById("chec").checked;
				console.log(a);
				
				if(!t_1&&!t_2&&!t_3&&a){
					alert("注册成功");
				}
				else if(!a){
					alert("请阅读并同意服务条款和隐私政策");
				}
				else{
					alert("请完善你的注册信息");
					}
			}
			function ccname(){
				var u_name = document.getElementById("user_name").value;
				
				var t_1 = document.getElementById("t1");
				var u_nameGr = /^\w{6,12}$/;
			// console.log(u_name);
				if(!u_name){
					t_1.innerHTML = "用户名不能为空！";
					document.getElementById("user_name").style.borderColor="red";
				}
				
				else if(!u_nameGr.test(u_name))
				{
					t_1.innerHTML = "用户名必须是6~12个字符！";
					document.getElementById("user_name").style.borderColor="red";
				}
				else{
				t_1.innerHTML = "";
				document.getElementById("user_name").style.borderColor="gray";
				}
				
				
				
			}
			function ccnumb(){
				var u_name = document.getElementById("numb").value;
				var t_3 = document.getElementById("t3");
				var u_nameGr = /^\d{11}$/;
			// console.log(u_name);
				if(!u_name){
					t_3.innerHTML = "手机号码不能为空！";
					document.getElementById("numb").style.borderColor="red";
				}
				
				else if(!u_nameGr.test(u_name))
				{
					t_3.innerHTML = "请输入正确的手机号码";
					document.getElementById("numb").style.borderColor="red";
				}
				else{
				t_3.innerHTML = "";
				document.getElementById("numb").style.borderColor="gray";
				}
				
				
				
			}
			function ccpassword(){
				
				var u_name = document.getElementById("user_password").value;
					var t_2 = document.getElementById("t2");
					var u_nameGr = /^\w{6,12}$/;
					var c_2 = document.getElementById("c2");
					var a_2 = document.getElementById("a2");
					var b_2 = document.getElementById("b2");
				// console.log(u_name);
					if(!u_name){
						t_2.innerHTML = "密码不能为空！";
						document.getElementById("user_password").style.borderColor="red";
						c_2.innerHTML = "";
						a_2.innerHTML = "";
						b_2.innerHTML = "";
						
					}
					
					else if(!u_nameGr.test(u_name))
					{
						t_2.innerHTML = "密码必须是6~12个字符！";
						document.getElementById("user_password").style.borderColor="red";
						c_2.innerHTML = "";
						a_2.innerHTML = "";
						b_2.innerHTML = "";
					}
					else{
					t_2.innerHTML = "";
					c_2.innerHTML = "";
					a_2.innerHTML = "";
					b_2.innerHTML = "";
					document.getElementById("user_password").style.borderColor="gray";
					}
			}
			function on(){
				var t_1 = document.getElementById("t1");
				t_1.innerHTML = "";
			}
			function on1(){
				var u_name = document.getElementById("user_password").value;
				var t_2 = document.getElementById("t2");
				var c_2 = document.getElementById("c2");
				var a_2 = document.getElementById("a2");
				var b_2 = document.getElementById("b2");
				var u_psGr = /^\w{6,12}$/;
				if(!u_psGr.test(u_name)){
				t_2.innerHTML = "";
				c_2.innerHTML = "密码必须是6~12个字符！";
				a_2.innerHTML = "不能包括空格";
				b_2.innerHTML = "必须包含字母、数字、符号中至少2种";
				}
				else{
					t_2.innerHTML = "";
					c_2.innerHTML = "";
					a_2.innerHTML = "";
					b_2.innerHTML = "";
				}
			}
		</script>
	</body>
</html>
